<template>
  <div class="gonggao">
    <PublicHead></PublicHead>
    <div class="gonggaoBanner">
    </div>
    <div class="gonggaoTitle">
      <div class="content">
        <div>公告信息</div>
        <div>/</div>
        <div @click="toGongshi()">公示信息</div>
      </div>
    </div>
    <div class="gonggaoList">
      <div class="content">
        <div class="gonggaoBox">
          <div class="item" v-for="(item, index) in gonggaolist" :key="index">
            <div class="row1">
              <div class="sanjiao"></div>
              <div class="title" @click="toDetail(item.id)">{{ item.title }}</div>
            </div>
            <p class="row2" @click="toDetail(item.id)" style="cursor: pointer;word-wrap:break-word">
              {{ item.content | extractChinese() }}
            </p>
            <p class="row3" @click="toDetail(item.id)" style="cursor: pointer;">
              {{ item.source }}
            </p>
            <div @click="toDetail(item.id)" style="cursor: pointer;">{{ item.gmtCreate }}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="pages">
      <el-button @click="pervious">上一页</el-button>
      <div class="pagezujian">
        <el-pagination @current-change="handleCurrentChange" :current-page="page" :page-size="size" background
          layout=" pager" :total="total" ref="pageGroup"></el-pagination>
      </div>
      <el-button @click="next">下一页</el-button>
      <span>共{{ Math.ceil(total / size) }}页</span>
    </div>
    <PublicFoot></PublicFoot>
  </div>
</template>

<script>
import PublicHead from '../components/PublicHead.vue'
import PublicFoot from '../components/PublicFoot.vue'
import { gonggao_list } from '@/api/api';
export default {
  data() {
    return {
      gonggaolist: [],
      page: 1,
      size: 6,
      total:null
    }
   
  },
  methods: {
    //去公示页面
    toGongshi() {
      this.$router.push('/gongshi');
    },
    toDetail(detailId) {
      this.$store.commit('setDetailid', detailId)
      this.$router.push('/detail');
    },
    //分页组件
    handleCurrentChange(currentPage) {
      this.page = currentPage
      this.gonggao_list()
    },
    pervious() {
      this.$refs.pageGroup.prev()
    },
    next() {
      this.$refs.pageGroup.next()
    },
    gonggao_list() {
      gonggao_list({ page: this.page, size: this.size, type: '0' }).then((res) => {
        console.log(res.data.data);
        this.total = res.data.data.total
        this.gonggaolist = res.data.data.records
        this.gonggaolist = res.data.data.records.map(item => ({
          ...item,
          gmtCreate: new Date(item.gmtCreate).toISOString().slice(0, 10)
        }));
        console.log(this.gonggaolist);
      })
    }
  },
  mounted() {
    this.gonggao_list()
  },
  filters: {
    extractChinese(text) {
      if (text) {
        const paragraphRegex = /<p>(.*?)<\/p>/g;
        const imgRegex = /<img[^>]*>/g;
        const paragraphs = text.match(paragraphRegex);
        let result = '';
        if (paragraphs) {
          paragraphs.forEach((paragraph) => {
            if (!imgRegex.test(paragraph)) {
              const cleanedText = paragraph.replace(/<.*?>/g, '');
              const extractedText = cleanedText.replace(/<\/?[^>]+(>|$)/g, '');
              result += extractedText;
            }
          });
        }
        return result;
      } else {
        return "";
      }
    }
  },
  components: {
    PublicHead,
    PublicFoot
  }
}
</script>

<style scoped lang="scss">
.pages {
  margin-bottom: 20px;
  display: flex;
  justify-content: center;

  // position: absolute;
  // bottom: 5%;
  // left: 50%;
  // transform: translateX(-50%);
  .pagezujian {
    // display:block;
    margin: auto 0;
  }

  span {
    display: inline-block;
    margin: auto 0;
    margin-left: 10px;
    font-size: 14px;
  }
}

.content {
  width: 1220px;
  height: 100%;
  margin: 0 auto;
  box-sizing: border-box;
  display: flex;
}

.gonggaoBanner {
  width: 100%;
  height: 350px;
  background: url('../assets/img/gonggaobanner.png') no-repeat;
  background-size: 100% 100%;
}

.gonggaoTitle {
  width: 100%;
  height: 78px;
  display: flex;
  background-color: white;

  .content {
    align-items: center;

    div {
      height: 75px;
      font-size: 18px;
      font-family: Microsoft YaHei;
      font-weight: bold;
      margin-right: 30px;
      line-height: 75px;
      cursor: pointer;
    }

    div:nth-of-type(1) {

      color: #1285D7;
    }
  }
}

.gonggaoList {
  width: 100%;
  height: 80%;
  background: #F0F0F0;

  .gonggaoBox {
    width: 1220px;
    min-height: 1255px;
    background: #FFFFFF;
    margin-top: 30px;
    margin-bottom: 30px;

    .item {
      margin-bottom: 40px;
      padding: 30px;
      transition: border-left 0.2s ease, background-color 0.3s ease, color 0.3s ease;

      &:hover {
        // border-left: #1CA9FF 5px solid;
        background-color: #F6FAFF
      }

      &:hover .title {
        color: #1CA9FF !important;
      }

      .row1 {
        display: flex;
        align-items: center;

        .sanjiao {}

        div:nth-of-type(2) {
          width: 955px;
          height: 18px;
          font-size: 18px;
          font-family: Microsoft YaHei;
          font-weight: bold;
          color: #303743;
          line-height: 20px;
          cursor: pointer;
        }

        margin-bottom: 15px;
      }

      .row2 {
        margin-bottom: 30px;
        color: #818182;
        font-size: 14px;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .row3 {
        font-weight: bold;
        color: #575757;
        margin-bottom: 10px;
      }

      div:nth-of-type(2) {
        font-size: 14px;
      }


    }


  }
}
</style>